<template>
  <guide :guideObj="{title: config.configType}" @backHome="backHome">
    <div slot="warn" class="description">
      温馨提示：
      <ul>
        <li>
          1.因为工单流程的配置较为复杂，为节省您的时间，售后人员将为您免费提供配置服务，只需填写下方的申请配置工单，点击提交，售后人员收到申请后会按照您的要求完成配置服务。
        </li>
        <li>
          2.您可以点击顶部【?】里的【服务工单】查看您所有的配置申请的动态并进行回复。注意：工作时间为9:00——18:00，非工作时间不进行配置，如需紧急支持请拨打客服热线：4001-113-114。
        </li>
      </ul>
    </div>
    <div slot="directions" class="description">
      <p class="padding5 prompt">
        (以企业内部销售人员申请合同流程为例)
      </p>
      <p class="font14 title">
      案例需求
      </p>
      <div class="padding5">
        以企业内部销售人员申请合同的流程举例，涉及到的人物角色有销售、主管、法务， 工单流程所涉及的内容包括：客户名称、是否快递、快递地址、联系方式、合同金额、主管退回原因、法务退回原因、快递单号等字段
      </div>
      <div class="configFlow">
        <p class="font14 title">
          流程梳理
        </p>
        <p>根据上面的工单流程信息，<span :class="{oem_7moor:$store.state.oemObj.oemFlag}">七陌</span>工作人员可以帮助您实现如下流程：</p>
        <p><span :class="{oem_7moor:$store.state.oemObj.oemFlag}">七陌</span>工作人员可为您配置三种流程：</p>
        <ul>
          <li>1.销售合同申请、填写合同工单——主管审批通过——法务审批通过、填写快递单号——销售确认。</li>
          <li>2.销售合同申请、填写合同工单——主管审批不通过、填写主管退回原因——销售重新申请。</li>
          <li>3.销售合同申请、填写合同工单——主管审批通过——法务审批不通过、填写法务退回原因——主管确认。</li>
        </ul>
        <div>
          <img src="../../../../assets/img/configHelp/business1.png" style="width: 860px">
        </div>
      </div>
        <div class="business-flow-opreate">
        <p class="font14 title">工单处理操作展示</p>
        <p >以下是第一种工单操作流程的截图展示：</p>
        <p>销售合同申请、填写合同工单——主管审批通过——法务审批通过、填写快递单号——销售确认。</p>
        <p>1.销售合同申请、填写合同工单</p>
        <div>
          <img src="../../../../assets/img/configHelp/business2.png" style="width: 570px">
        </div>
        <p>2、主管审批通过</p>
        <div>
          <img src="../../../../assets/img/configHelp/business3.png" style="width: 804px">
        </div>
        <p>3、法务审批通过、填写快递单号</p>
        <div>
          <img src="../../../../assets/img/configHelp/business4.png" style="width: 804px">
        </div>
        <p>4、销售确认</p>
        <div>
          <img src="../../../../assets/img/configHelp/business5.png" style="width: 804px">
        </div>
      </div>
    </div>
    <el-row slot="application" :gutter="20">
      <el-col :span="12">
        <business-form :config="config" :cssStyle="{row: 40, placeHolder: '小提示:可复制粘贴右侧模板内容后按照格式进行修改'}" ref="businessForm" @backHome="backHome"></business-form>
      </el-col>
      <el-col :span="12">
        <div class="business-flow-example">
          <h2 class="font14" style="padding-bottom: 10px">配置说明模板</h2>
          <span class="copyText" @click="copyText"><i class="iconfont icon-fuzhi add-flow-color"></i>&nbsp;复制</span>
          <ul class="business-flow-example-ul" id="business-flow-copy">
            <li class="first">
              <span class="">1、人物角色</span>
              <ul class="second disclist"><li>销售、主管、法务。</li></ul>
            </li>
            <li class="first">
              <span class="">2、字段</span>
              <ul class="second disclist">
                <li>字段类型包括：单行文本、多行文本、数字文本、日期、下拉框、复选框、单选框、附件。请您根据需要进行填写。</li>
                <li>流程所含字段
                  <ul class="circlelist">
                    <li>客户名称 - 单行文本</li>
                    <li>是否快递 - 单选框</li>
                    <li>快递地址 - 多行文本</li>
                    <li>联系方式 - 单行文本</li>
                    <li>合同金额 - 数字文本</li>
                    <li>主管退回原因 - 多行文本</li>
                    <li>法务退回原因 - 多行文本</li>
                    <li>快递单号 - 单行文本</li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <span class="">3、流程：</span>
              <ul>
                <li>（1）合同申请
                  <ul class="disclist">
                    <li>由【销售】来提交 ->【主管】处理
                      <ul class="circlelist">
                        <li>客户名称 - 单行文本</li>
                        <li>是否快递 - 单选框</li>
                        <li>快递地址 - 多行文本</li>
                        <li>联系方式 - 单行文本</li>
                        <li>合同金额 - 数字框</li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li>（2）主管审核
                  <ul class="disclist">
                    <li>由【主管】审核，审核通过 ->【法务】处理
                      <ul class="circlelist">
                        <li>字段：无</li>
                      </ul>
                    </li>
                    <li>【主管】审核不通过 ->退回给【销售】
                      <ul class="circlelist">
                        <li>字段：快递单号 - 单行文本</li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li>（3）法务审核
                  <ul class="disclist">
                    <li>由【主管】提交 ->【法务】审核</li>
                    <li>【法务】审核通过 ->提交给【销售】确定，填写好快递单号，以便后续查询
                      <ul class="circlelist">
                        <li>字段：退回原因 - 多行文本</li>
                      </ul>
                    </li>
                    <li>【法务】审核不通过 ->退回给【主管】确定
                      <ul class="circlelist">
                        <li>字段：退回原因 - 多行文本</li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </guide>
</template>

<script>
  import Guide from '../../../ui-modules/guide/index'
  import BusinessForm from './businessCommon'
  import Clipboard from 'clipboard-js'
  export default {
    name: 'businessHelp',
    data () {
      return {
        visible2: false
      }
    },
    props: {
      config: Object
    },
    components: {
      Guide,
      BusinessForm
    },
    activated () {
      this.$refs.businessForm.resetForm()
    },
    inject: ['back'],
    methods: {
      copyText () {
        let self = this
        Clipboard.copy(document.getElementById('business-flow-copy').innerText).then(
          function () {
            self.$message.success(self.$t('config.business.copySuccess'))
          }
        )
      },
      backHome () {
        this.back()
      },
      jumpToConfig () {
        this.visible2 = false
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import "../../../../assets/common.styl"
  .description
    p
      padding 10px 0
    ul
      padding 10px 0
    li
      display list-item
      line-height 26px
      margin:0
    .title
      color $cf-gray3
      font-weight bold
    .prompt
      color $c-prompt
  .business-flow-example
    position relative
    margin: 20px auto 0
    padding 10px 30px
    background: #fafafa
    border-radius 5px
    .copyText
      position absolute
      right 20px
      top 10px
      cursor pointer
    li
      line-height 24px
      font-size 12
      color $cf-gray3
  .icon-fuzhi
    color $c-main
  .popover
    padding 5px
    line-height 18px
    font-size 14px
  .padding5
    padding 10px 0
  img
    width auto
    max-width 100%
    border 10px solid #f7f7f7
    border-radius 5px
    margin 10px 0
</style>
